import waves from "@/directive/waves"; // Waves directive
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { alertWithCallback, alertMessage, isValidateNull } from "@/utils/utils";
import { mapGetters } from 'vuex';
import { getCategoryList, saveCategory, deleteSelectedCategory } from "@/views/car-manage/car.service";

export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      recordNum: 20, // 分页组件默认的页数, 分页里的select默认10, 20, 50
      totalNum: 0, // 数据总数
      pageNum: 1, // 页数
      data: [], // 用户列表
      dialogTitle: '', // 表单标题
      searchCriteria: {}, // 搜索条件
      editDialogVisible: false, // 编辑详情模态窗
      editForm: {}, // 表单
      editRules: {
        brandName: [{ required: true, trigger: "change", validator: isValidateNull }]
      }, // 表单效验规则
      checkedRows: [] // table checkbox选中数据
    }
  },
  computed: {
    ...mapGetters([
      'codesCheck'
    ])
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 获取列表
    getDataList() {
      this.searchCriteria.pageNum = this.pageNum;
      this.searchCriteria.recordNum = this.recordNum;
      getCategoryList(this.searchCriteria).then(res => {
        this.totalNum = res.dataCount;
        this.data = res.data;
      });
    },

    // 根据关键字进行搜索
    search() {
      this.pageNum = 1;
      this.getDataList();
    },

    // 重置搜索
    reset() {
      this.pageNum = 1;
      this.searchCriteria = {};
      this.getDataList();
    },

    // 处理checkbox选中行数据
    handleSelectionChange(val) {
      this.checkedRows = val;
    },

    // 打开新建、编辑窗体
    openEditDialog(type, selectedData) {
      if (type === 'create') {
        this.dialogTitle = '新增车辆品类';
        this.$nextTick(() => {
          // 重置必填项
          this.editForm = {
            modelList: [{ text: '' }]
          };
          this.$refs.dataForm.resetFields();
        });
      } else {
        this.dialogTitle = '编辑车辆品类';
        this.$nextTick(() => {
          this.editForm = JSON.parse(JSON.stringify(selectedData));
          this.$refs.dataForm.resetFields();
        });
      }
      this.editDialogVisible = true;
    },

    // 创建或者编辑信息
    save() {
      // 表单验证
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          saveCategory(this.editForm).then((res) => {
            this.editDialogVisible = false;
            alertMessage(res.message);
            this.reset();
          }).catch(() => {}); // 关闭confirm框的回调，不处理的话会报一个js error
        }
      });
    },

    // 显示关联车辆
    showCarDialog(rowData) {
      this.showSelectCarDialog = true;
    },

    // 显示车辆详情
    showCarDetailDialog(rowData) {
      this.showSelectCarDetailDialog = true;
    },

    // 添加指标数据
    addData() {
      this.editForm.modelList.push({
        text: ''
      });
    },

    // 删除指标数据
    deleteData(index) {
      this.editForm.modelList.splice(index, 1);
    },

    // 删除选中数据
    deleteSelectedData(id) {
      if (id) {
        alertWithCallback('此操作将永久删除该数据, 是否继续?', '提示').then(() => {
          deleteSelectedCategory([id]).then((res) => {
            alertMessage(res.message);
            this.reset();
          }).catch(() => {}); // 关闭confirm框的回调，不处理的话会报一个js error
        }).catch(() => {}); // 关闭confirm框的回调，不处理的话会报一个js error
      } else {
        if (this.checkedRows.length == 0) {
          alertMessage('请选择记录', 'warning');
        } else {
          alertWithCallback('此操作将永久删除该数据, 是否继续?', '提示').then(() => {
            const ids = [];
            this.checkedRows.forEach(item => {
              ids.push(item.objectId)
            });
            deleteSelectedCategory(ids).then((res) => {
              alertMessage(res.message);
              this.reset();
            }).catch(() => {}); // 关闭confirm框的回调，不处理的话会报一个js error
          }).catch(() => {}); // 关闭confirm框的回调，不处理的话会报一个js error
        }
      }
    }
  }
}
